/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { useEffect, useState, useRef } from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity, Dimensions, ImageBackground, Modal, Platform, LayoutChangeEvent } from 'react-native';
import Orientation from 'react-native-orientation';
import {
  ExpandedRegionLayoutOptions,
  FoldedRegionLayoutOptions,
  FoldSplitContainer,
  HoverModeRegionLayoutOptions,
  PresetSplitRatio,
} from '@hadss/react_native_adaptive_layout/src';
import Swiper from 'react-native-swiper';
import musicPlayer from '../util/index';
import { GestureDetector, Gesture, ViewWithKeyEvent } from '@hadss/react_native_uni_input';

import Animated, { useSharedValue, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import ImageLogo from './model/ImageLogo.tsx';
import MusicBaseInfo from './model/MusicBaseInfo.tsx';
import ExtraPage from './model/ExtraPage.tsx';
import { MusicPlayPageConstants } from '../util/constants.tsx';
import { throttle } from '@hadss/react_native_adaptive_layout/src/utils/ThrottleUtils';

function MusicPlay({ changePageShow }): JSX.Element {
  let nowPositionWidth = useSharedValue(0);
  const [nowPositionWidthForAuto, setNowPositionWidthForAuto] = useState<number>(0);
  const [playState, setPlayState] = useState<boolean>();
  const [position, setPosition] = useState<number>(0);
  const [duration, setDuration] = useState<number>(0);
  const [title, setTitle] = useState<string>('');
  const [artist, setArtist] = useState<string>('');
  const [isHover, setIsHover] = useState<boolean>(false);
  const [isExpanded, setIsExpanded] = useState<boolean>(Dimensions.get('window').width >= 600);
  const isWide = Dimensions.get('screen').height >= 900 || Dimensions.get('screen').width >= 900;
  const [isLarge, setIsLarge] = useState<boolean>(Dimensions.get('window').width >= 800);
  // 是否显示长按提示窗
  const [showToast, setShowToast] = useState(false);
  const expandedLayoutOptions: ExpandedRegionLayoutOptions = {
    isExtraRegionPerpendicular: true,
    verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1,
    horizontalSplitRatio: 0.9,
  };
  const foldedRegionLayoutOptions: FoldedRegionLayoutOptions = {
    verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1,
  };
  const hoverModeLayoutOptions: HoverModeRegionLayoutOptions = {
    horizontalSplitRatio: 0.66,
    showExtraRegion: true,
  };

  useEffect(() => {
    isWide && Orientation.lockToLandscape();
    const screenListener = Dimensions.addEventListener('change', ({ window: { width } }) => {
      if (isWide) {
        Orientation.lockToLandscape();
      } else {
        setIsExpanded(width >= 600);
        setIsLarge(width >= 800);
      }
    });
    musicPlayer.onProgress((currentTime, duration) => {
      if (isHarmonyOS()) {
        setPosition(currentTime / 1000);
        setDuration(duration / 1000);
      } else {
        setNowPositionWidthForAuto(currentTime);
        setDuration(duration);
      }
    });
    updateTrack();
    musicPlayer.setOnTrackChange(() => {
      updateTrack();
    });
    return () => {
      screenListener.remove();
      isWide && Orientation.unlockAllOrientations();
    };
  }, [isWide]);

  useEffect((): void => {
    nowPositionWidth.value = nowPositionWidthForAuto;
  }, [nowPositionWidthForAuto]);

  // 判断是否是ohos设备
  const isHarmonyOS = (): boolean => {
    return Platform.OS === 'harmony';
  };
  const seekTo = (val: number): void => {
    const time = isHarmonyOS() ? val * 1000 : val;
    musicPlayer.setCurrentTime(time);
  };
  // 在没有加手势的时候,当前进度条相对于总宽度的位置
  const [positionWidth, setPositionWidth] = useState(0);
  // 进度条的总宽度
  const [progressAllWidth, setProgressAllWidth] = useState(0);
  // 进度条上的总的偏移量
  const allTranslation = isHarmonyOS() ? 1050 : 340;
  // 获取进度条的总宽度
  const getProgressWidth = (event): void => {
    const { width } = event.nativeEvent.layout;
    setProgressAllWidth(width);
  };

  let lastTime1 = 0;
  // 进度条
  const setProcess1 = throttle(newProgress => {
    setPosition(newProgress);
    seekTo(newProgress);
  }, 50);

  const setPositionWidthOut = throttle(newPositionWidth => {
    setPositionWidth(newPositionWidth);
  }, 50);
  const panProgress = Gesture.Pan()
    .minPointers(1)
    .direction('left | right')
    .onUpdate(event => {
      const timeDistend = Date.now() - lastTime1;
      if (timeDistend > 100) {
        // 进度条上偏移的相对距离
        const clampedWidth = (event.translationX * progressAllWidth) / allTranslation;
        // 处理系统偏差
        let newMovedDistance = clampedWidth + positionWidth;
        // 进度条上移动后的总距离,最大不会超过进度条的总宽度
        const allWidth = newMovedDistance > progressAllWidth ? progressAllWidth : newMovedDistance;
        // 进度条上移动后的总距离和视频总长度的总时间
        const newProgress = (allWidth * duration) / progressAllWidth;
        // 防止给的总的偏移量的值有偏差
        if (newProgress >= 0) {
          runOnJS(setProcess1)(newProgress);
        } else {
          runOnJS(setProcess1)(0);
        }
        lastTime1 = Date.now();
      }
    })
    .onEnd(() => {
      const newPositionWidth = (position * progressAllWidth) / duration;
      runOnJS(setPositionWidthOut)(newPositionWidth);
    });

  // 非ohos的进度条--start
  let isStopMusic = useSharedValue(false);
  let isGestureEnd = useSharedValue(false);
  let lastTime2 = 0;
  //  每次进入到updata中在进度条上的上一次向对间距
  let oldTranslationX = useSharedValue(0);
  let oldPosetion = useSharedValue(0);

  // 切换播放状态
  const togglePlayPause = async (): Promise<void> => {
    const state = musicPlayer.getCurrentStatus();
    state ? musicPlayer.pause() : musicPlayer.play();
    setPlayState(!state);
  };

  const setProcess2 = (newProgress): void => {
    seekTo(newProgress);
  };

  // 防止定时器和手势的值相互影响，在开启手势的时候，暂停定时器
  const stopMusic = (): void => {
    if (playState) {
      isStopMusic.value = true;
      togglePlayPause();
    }
  };

  useEffect(() => {
    if (!playState && isStopMusic.value && isGestureEnd.value) {
      isStopMusic.value = false;
      isGestureEnd.value = false;
      togglePlayPause();
    }
  }, [playState, isStopMusic.value, isGestureEnd.value]);

  // 进度条
  const panProgressForNotHarmony = Gesture.Pan()
    .minPointers(1)
    .direction('left | right')
    .onStart(() => {
      oldTranslationX.value = 0;
      runOnJS(stopMusic)();
    })
    .onUpdate(event => {
      const timeDistend = Date.now() - lastTime2;
      if (timeDistend > 1000) {
        const translationX1 = event.translationX;
        const distanceTranslationX = translationX1 - oldTranslationX.value;
        oldTranslationX.value = translationX1;
        //  每次进入到updata中在进度条上的相对位置
        const distanceTranslationXWidth = (distanceTranslationX * duration) / allTranslation;
        const newMovedDistance = distanceTranslationXWidth + (oldPosetion.value ? oldPosetion.value : nowPositionWidth.value);
        const newPosetion = newMovedDistance > duration ? duration : newMovedDistance;
        oldPosetion.value = newPosetion;
        // 防止给的总的偏移量的值有偏差
        if (newPosetion >= 0) {
          nowPositionWidth.value = newPosetion;
          runOnJS(setProcess2)(newPosetion);
        } else {
          runOnJS(setProcess2)(0);
        }
        lastTime2 = Date.now();
      }
    })
    .onEnd(() => {
      isGestureEnd.value = true;
    });

  const animatedPosition = useAnimatedStyle(() => ({
    width: `${nowPositionWidth.value === 0 ? 0 : (nowPositionWidth.value / duration) * 100}%`,
  }));

  const onLayout = (event: LayoutChangeEvent): void => {
    const { width } = event.nativeEvent.layout;
    setIsHover(width > 600);
  };

  const skipToNext = async (): Promise<void> => {
    musicPlayer.nextTrack();
    updateTrack();
    setPlayState(true);
  };

  const skipToPrevious = async (): Promise<void> => {
    musicPlayer.previousTrack();
    updateTrack();
    setPlayState(true);
  };

  const updateTrack = (): void => {
    // 每次切换音乐的时候,手势拖动的具体都需要清空
    // ohos手势
    setPositionWidth(0);
    // 非ohos手势
    oldPosetion.value = 0;
    setNowPositionWidthForAuto(0);
    nowPositionWidth.value = 0;
    const track = musicPlayer.getCurrentTrack();
    if (track) {
      setPlayState(musicPlayer.getCurrentStatus());
      setArtist(track.artist);
      setTitle(track.title);
    }
  };

  const formatTime = (second: number): string => {
    // 计算分钟数，注意 Math.floor 会向下取整
    const minutes = Math.floor(second / 60);
    // 计算剩余的秒数，使用 % 运算符取余数
    const remainingSeconds = Math.floor(second % 60);
    // 使用字符串的 padStart 方法来确保分钟和秒数都是两位数
    // 如果数字小于 10，则在前面添加一个 0
    const formattedMinutes = minutes.toString().padStart(2, '0');
    const formattedSeconds = remainingSeconds.toString().padStart(2, '0');
    // 返回格式化的时间字符串
    return `${formattedMinutes}:${formattedSeconds}`;
  };

  // 返回到上一个页面
  const backToLast = (): void => {
    changePageShow(true);
  };

  // 长按的提示
  const handleLongPress = (): void => {
    setShowToast(true);
    setTimeout(() => {
      setShowToast(false);
    }, 1500);
  };

  const longPressGesture = Gesture.LongPress().onEnd(() => runOnJS(handleLongPress)());

  // 按键
  const downKeyEvent = (event): void => {
    if (!event || !event.nativeEvent || event.nativeEvent.eventType !== 'up') {
      return;
    }
    const keyValue = event.nativeEvent.keyValue || '';
    switch (keyValue) {
      case 'KEYCODE_DPAD_UP':
        //上键:切换歌曲为上一曲
        skipToPrevious();
        break;
      case 'KEYCODE_DPAD_DOWN':
        //下键:切换歌曲为下一曲
        skipToNext();
        break;
      case 'KEYCODE_DPAD_LEFT':
        //左键:控制播放器快退5s播放
        if (position - 5 >= 0) {
          setPosition(position - 5);
          seekTo(position - 5);
        } else {
          setPosition(0);
          seekTo(0);
        }
        break;
      case 'KEYCODE_DPAD_RIGHT':
        //右键:控制播放器快进5s播放
        if (position + 5 <= duration) {
          setPosition(position + 5);
          seekTo(position + 5);
        } else {
          setPosition(duration);
          seekTo(duration);
        }
        break;
      case 'KEYCODE_ENTER':
      case 'KEYCODE_SPACE':
        //space/enter: 改变歌曲播放状态
        togglePlayPause();
        break;
      case 'KEYCODE_ESCAPE':
        //esc:回到上一级页面
        changePageShow(true);
        break;
      default:
        break;
    }
  };

  // 对应歌曲图片
  const primaryRender = (): JSX.Element => {
    return <ImageLogo></ImageLogo>;
  };

  const progressBar = (): JSX.Element => {
    return (
      <View style={styles.progressBarContainer} onLayout={getProgressWidth}>
        {isHarmonyOS() ? (
          <GestureDetector gesture={panProgress}>
            <View>
              <View
                style={[
                  styles.progressFill,
                  {
                    width: `${position === 0 ? 0 : (position / duration) * 100}%`,
                  },
                ]}
              />
            </View>
          </GestureDetector>
        ) : (
          <GestureDetector gesture={panProgressForNotHarmony}>
            <Animated.View style={[styles.progressFill, animatedPosition]} />
          </GestureDetector>
        )}
      </View>
    );
  };

  const actionButton = (): JSX.Element => {
    return (
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          width: isHover ? '93%' : '88%',
          alignItems: 'center',
          marginTop: 20,
        }}>
        <Image source={require('../../../asset/image/repeat.png')} style={styles.imageGrey} resizeMode="contain" />
        <TouchableOpacity onPress={skipToPrevious}>
          <Image source={require('../../../asset/image/left.png')} style={styles.image} />
        </TouchableOpacity>
        <TouchableOpacity onPress={togglePlayPause}>
          <Image source={playState ? require('../../../asset/image/pause.png') : require('../../../asset/image/play.png')} style={styles.imagePlay} />
        </TouchableOpacity>
        <TouchableOpacity onPress={skipToNext}>
          <Image source={require('../../../asset/image/forward_end_fill.png')} style={styles.image} />
        </TouchableOpacity>
        <Image source={require('../../../asset/image/music_note_list.png')} style={styles.imageGrey} resizeMode="contain" />
      </View>
    );
  };

  const secondRender = (): JSX.Element => (
    <View style={isHarmonyOS() ? styles.centerStyle : { alignItems: 'center' }} onLayout={onLayout}>
      <MusicBaseInfo isHoverdate={isHover} title={title} artist={artist}></MusicBaseInfo>
      {/* 小屏上进度条 */}
      <View>{progressBar()}</View>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          width: isHover ? '93%' : '88%',
          marginTop: 5,
        }}>
        <Text style={styles.progressText}>{formatTime(isHarmonyOS() ? position : nowPositionWidth.value)}</Text>
        <Text style={styles.progressText}>{formatTime(duration)}</Text>
      </View>
      {actionButton()}
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          width: isHover ? '93%' : '88%',
          alignItems: 'center',
          marginTop: 32,
        }}>
        <Image source={require('../../../asset/image/share_play.png')} style={styles.imageGrey} resizeMode="contain" />
        <Image source={require('../../../asset/image/bell.png')} style={styles.imageGrey} resizeMode="contain" />
        <Image source={require('../../../asset/image/arrow_down_circle.png')} style={styles.imageGrey} resizeMode="contain" />
        <Image source={require('../../../asset/image/dot.png')} style={styles.imageGrey} resizeMode="contain" />
      </View>
    </View>
  );

  const musicProgressBar = (): JSX.Element => {
    return (
      <View style={styles.slider} onLayout={getProgressWidth}>
        <GestureDetector gesture={panProgress}>
          <View>
            <View
              style={[
                styles.progressFill,
                {
                  width: `${position === 0 ? 0 : (position / duration) * 100}%`,
                },
              ]}
            />
          </View>
        </GestureDetector>
      </View>
    );
  };

  const playbackControls = (): JSX.Element => {
    return (
      <View style={styles.container}>
        <Image source={require('../../../asset/image/repeat.svg')} style={styles.imageGrey} />
        <TouchableOpacity onPress={skipToPrevious}>
          <Image source={require('../../../asset/image/left.svg')} style={styles.image} />
        </TouchableOpacity>
        <TouchableOpacity onPress={togglePlayPause}>
          <Image source={playState ? require('../../../asset/image/pause.svg') : require('../../../asset/image/play.svg')} style={styles.imagePlay} />
        </TouchableOpacity>
        <TouchableOpacity onPress={skipToNext}>
          <Image source={require('../../../asset/image/forward_end_fill.svg')} style={styles.image} />
        </TouchableOpacity>
        <Image source={require('../../../asset/image/music_note_list.svg')} style={styles.imageGrey} />
      </View>
    );
  };

  const secondPadRender = (): JSX.Element => (
    <View style={styles.centerStyle}>
      {/* 大屏上的进度条 */}
      {musicProgressBar()}
      <View style={styles.controls}>
        <Text style={styles.progressText}>{formatTime(position)}</Text>
        <Text style={styles.progressText}>{formatTime(duration)}</Text>
      </View>
      {playbackControls()}
      <View style={styles.container}>
        <Image source={require('../../../asset/image/share_play.svg')} style={styles.imageGrey} />
        <Image source={require('../../../asset/image/bell.svg')} style={styles.imageGrey} />
        <Image source={require('../../../asset/image/arrow_down_circle.svg')} style={styles.imageGrey} />
        <Image source={require('../../../asset/image/dot.svg')} style={styles.imageGrey} />
      </View>
    </View>
  );
  const extraRender = (): JSX.Element => (
    <View style={styles.extra}>
      <Text
        style={{
          marginTop: isHover ? 70 : 0,
          fontSize: 23,
          color: '#ffffff',
        }}>
        此歌曲为纯音乐，请您欣赏
      </Text>
    </View>
  );

  const extraRenderForPad = (): JSX.Element => (
    <View style={styles.flexStyle}>
      <View style={styles.message}>
        <View>
          <Text style={styles.text}>{title}</Text>
          <Text style={styles.title}>{artist}</Text>
        </View>
      </View>

      <View style={styles.flexStyle}>
        <View style={styles.containerOut}>
          <Text
            style={{
              marginTop: isHover ? 70 : 0,
              fontSize: 23,
              color: '#ffffff',
            }}>
            此歌曲为纯音乐，请您欣赏
          </Text>
        </View>
        <View style={styles.imageGreyForPad}>
          <Image source={require('../../../asset/image/likes.svg')} style={styles.imageGrey} />
        </View>
      </View>
    </View>
  );

  // 页面上方的返回和分享
  const pageHead = (): JSX.Element => {
    return (
      <View style={styles.backGroundStyleInner}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            width: isExpanded ? '95%' : '88%',
            alignItems: 'center',
            marginTop: 40,
          }}>
          <TouchableOpacity onPress={backToLast}>
            <Image source={require('../../../asset/image/down.png')} style={styles.imageSmall} />
          </TouchableOpacity>
          <View>
            <GestureDetector gesture={longPressGesture}>
              <Image source={require('../../../asset/image/shareSound.png')} style={styles.imageShare} />
            </GestureDetector>
          </View>
        </View>
      </View>
    );
  };

  // 只有ohos系统采用页面元素
  const swiperLayout = (): JSX.Element => {
    return (
      <Swiper
        showsPagination={true}
        paginationStyle={styles.paginationStyle}
        loop={false}
        autoplay={false}
        dotStyle={styles.swiperDot}
        activeDotStyle={styles.activeDot}
        pagingEnabled={true}>
        <FoldSplitContainer
          primary={primaryRender()}
          secondary={secondRender()}
          extra={extraRender()}
          expandedLayoutOptions={expandedLayoutOptions}
          foldedLayoutOptions={foldedRegionLayoutOptions}
          hoverModeLayoutOptions={hoverModeLayoutOptions}
        />
        <View style={{ flex: 1 }}>
          <ExtraPage title={title} artist={artist}></ExtraPage>
        </View>
      </Swiper>
    );
  };
  const isHarmonyPage = (): JSX.Element => {
    return (
      <ViewWithKeyEvent onKeyEvent={downKeyEvent}>
        <View style={{ width: '100%', height: '100%' }}>
          <ImageBackground source={require('../../../asset/image/blur.png')} style={styles.backGroundStyle}>
            {pageHead()}
            {isWide && (
              <View style={styles.flexDirectionStyle}>
                <View style={styles.padLayout}>
                  <View style={styles.centerStyle}>
                    {/* 图片*/}
                    <ImageLogo></ImageLogo>
                  </View>
                  {secondPadRender()}
                </View>
                <View style={styles.flexStyle}>{extraRenderForPad()}</View>
              </View>
            )}
            {!isWide && isExpanded && (
              <FoldSplitContainer
                primary={primaryRender()}
                secondary={secondRender()}
                extra={extraRender()}
                expandedLayoutOptions={expandedLayoutOptions}
                foldedLayoutOptions={foldedRegionLayoutOptions}
                hoverModeLayoutOptions={hoverModeLayoutOptions}
              />
            )}
            {!isWide && !isExpanded && swiperLayout()}
          </ImageBackground>
        </View>
      </ViewWithKeyEvent>
    );
  };

  // 非ohos系统采用的页面元素
  const isNotHarmonyPage = (): JSX.Element => {
    return (
      <View style={{ width: '100%', height: '100%' }}>
        <GestureHandlerRootView>
          <ImageBackground source={require('../../../asset/image/blur.png')} style={styles.backGroundStyle}>
            {pageHead()}
            <Swiper
              showsPagination={true}
              paginationStyle={styles.paginationStyle}
              loop={false}
              autoplay={false}
              dotStyle={styles.swiperDot}
              activeDotStyle={styles.activeDot}
              pagingEnabled={true}>
              <View>
                <View>{primaryRender()}</View>
                <View>{secondRender()}</View>
              </View>
              <View
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <ExtraPage title={title} artist={artist}></ExtraPage>
              </View>
            </Swiper>
          </ImageBackground>
        </GestureHandlerRootView>
      </View>
    );
  };

  return (
    <View>
      {isHarmonyOS() ? isHarmonyPage() : isNotHarmonyPage()}
      <Modal transparent={true} visible={showToast} animationType="fade" onRequestClose={(): void => setShowToast(false)}>
        <View style={styles.toastContainer}>
          <View style={styles.toastBox}>
            <Text style={styles.toastText}>无法分享</Text>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 14,
    color: MusicPlayPageConstants.progressColor,
    marginTop: 3,
  },
  progressText: {
    fontSize: 10,
    color: MusicPlayPageConstants.progressColor,
  },
  artist: {
    fontSize: 16,
    color: '#ffffff',
    opacity: 0.4,
  },
  slider: {
    marginTop: 80,
    width: 300,
    height: 10,
    backgroundColor: MusicPlayPageConstants.sliderColor,
    borderRadius: 5,
    position: 'relative',
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: 300,
    marginTop: 5,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: 300,
    alignItems: 'center',
    marginTop: 38,
  },
  message: {
    marginTop: '18%',
  },
  padLayout: {
    flex: 1,
  },
  extra: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'rgba(255, 255, 255, 0.9)',
    fontSize: 24,
    fontWeight: '700',
  },
  image: {
    width: 20,
    height: 20,
  },
  imageSmall: {
    width: 25,
    height: 25,
  },
  imageShare: {
    width: 20,
    height: 20,
  },
  imageGrey: {
    width: 24,
    height: 24,
    opacity: 0.4,
  },
  imageGreyForPad: {
    marginBottom: 60,
    alignItems: 'flex-end',
    marginRight: 100,
  },
  imagePlay: {
    width: 80,
    height: 80,
  },
  paginationStyle: {
    height: 10,
    top: -20,
  },
  swiperDot: {
    backgroundColor: MusicPlayPageConstants.sliderColor,
    width: 7,
    height: 6,
    borderRadius: 2,
    magin: 3,
  },
  activeDot: {
    backgroundColor: 'rgb(255,255,255)',
    width: 12,
    height: 6,
    borderRadius: 3,
    magin: 3,
  },
  progressBarContainer: {
    height: 10,
    width: 320,
    backgroundColor: MusicPlayPageConstants.sliderColor,
    borderRadius: 5,
    position: 'relative',
    marginTop: 80,
  },
  progressFill: {
    height: '100%',
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    borderRadius: 5,
  },
  containerOut: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  centerStyle: { flex: 1, alignItems: 'center' },
  flexStyle: {
    flex: 1,
  },
  flexDirectionStyle: { flex: 1, flexDirection: 'row' },
  backGroundStyle: { width: '100%', height: '100%' },
  backGroundStyleInner: {
    width: '100%',
    alignItems: 'center',
    zIndex: 1,
  },
  toastContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  toastBox: {
    padding: 15,
    backgroundColor: '#333',
    borderRadius: 5,
  },
  toastText: {
    color: 'white',
  },
});

export default React.memo(MusicPlay);
